<template>
  <view>
    <form>
      <view class="padding" style="text-align: center;">
        <view class="cu-avatar xl round margin-left" style="background-image:url(https://avatar.bbs.miui.com/images/noavatar_small.gif);" />
      </view>

      <view class="cu-form-group">
        <view class="title">账号</view>
        <input placeholder="account" name="username" @input="setFdUsername">
      </view>
      <view class="cu-form-group">
        <view class="title">密码</view>
        <input placeholder="password" name="password" type="password" @input="setFdPassword">
      </view>

      <view class="padding flex flex-direction">
        <button class="cu-btn bg-green margin-tb-sm lg" @click="addUser">登录</button>
      </view>
      <view style="text-align: center;" @click="toRegistration">没账号？去注册</view>
    </form>
    <!-- 提示框 -->
    <view class="cu-modal" :class="modalName=='Modal'?'show':''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content">提示</view>
          <view class="action" @tap="hideModal">
            <text class="cuIcon-close text-red" />
          </view>
        </view>
        <view class="padding-xl">
          {{ modalInfo }}
        </view>
      </view>
    </view>

  </view>
</template>

<script>
    import { login } from 'api/signup/index'

    const url = '/user'

    export default {
        data() {
            return {
                modalInfo: undefined,
                modalName: null,
                formDate: {
                    username: 'admin',
                    password: '123456'
                }
            }
        },
        created: function() {
        },

        methods: {
            toRegistration() {
                uni.redirectTo({
                    url: '/pages/signup/registration'
                })
            },
            toIndex() {
                uni.redirectTo({
                    url: '/pages/signup/index'
                })
            },
            showModal(e) {
                this.modalName = e.currentTarget.dataset.target
            },
            hideModal(e) {
                this.modalName = null
            },
            setFdUsername: function(event) {
                this.formDate.username = event.target.value
            },
            setFdPassword: function(event) {
                this.formDate.password = event.target.value
            },
            addUser() {
                if (!this.formDate.username) {
                    this.modalName = 'Modal'
                    this.modalInfo = '请填写登录账号！'
                    return false
                }
                if (!this.formDate.password) {
                    this.modalName = 'Modal'
                    this.modalInfo = '请填写登录密码！'
                    return false
                }
                login(this.formDate).then(response => {
                    // 页面跳转
                    const { meta } = response
					const { data } = response
                    if (meta.code !== 20000) {
                        this.modalName = 'Modal'
                        this.modalInfo = '登录失败！'
                    } else {
                      this.toIndex()
                      uni.setStorageSync('userId', data.userId)
                      uni.setStorageSync('userLanguage', data.userLanguage)
                      uni.setStorageSync('nickname', data.userName)
                    }
                })
            }
        }
    }
</script>

<style>
    .cu-form-group .title {
        min-width: calc(4em + 15px);
    }
</style>
